@import '@/styles/utils.scss';
@import '@/styles/colors.scss';

.subcategory {
  margin-right: px2rem(24);

  .title {
    width: 100%;
    color: $fontBlack;
    font-size: px2rem(16);
    font-weight: 700;
    line-height: px2rem(36);
    margin-bottom: px2rem(10);
    border-bottom: 1px solid #ddd;
    position: relative;
  }

  .body {
    display: flex;
    flex-wrap: wrap;
    height: px2rem(428);
    writing-mode: vertical-lr;

    .thirdCategory {
      writing-mode: horizontal-tb;
      width: px2rem(124);
      overflow: hidden;
      color: $fontBlack;
      display: flex;
      align-items: center;
      cursor: pointer;

      &:hover {
        color: $mainGold;
      }

      .thirdCategory__image {
        width: px2rem(46);
        height: px2rem(46);
      }
    }
  }
}
